import React, { useEffect, useState } from "react";
import { Toast, NavBar, Swiper, Image, ActionBar } from "react-vant";
import { useNavigate } from "react-router-dom";

import { CartO, ChatO, ShopO } from "@react-vant/icons";

import "./index.css";
const Index: React.FC = () => {
  const [shopDetail, setShopDetail] = useState<any>(
    JSON.parse(localStorage.getItem("carItem")!) || "{}"
  );

  const navigate = useNavigate();
  let [Carcount, setCarcount] = useState(0);
  const [cartListtwo, setCartListtwo] = useState([]);
  const CartXq = () => {
    setCarcount(Carcount + 1);
    cartListtwo.push(shopDetail);
    localStorage.setItem("cartListtwo", JSON.stringify(cartListtwo));
  };
  return (
    <div>
      <NavBar
        title="商品详情"
        leftText="返回"
        rightText="按钮"
        onClickLeft={() => navigate(-1)}
        onClickRight={() => Toast("按钮")}
      />
      <div className="shopdetail-img">
        <img src={shopDetail.img} />
      </div>
      <div>标题:{shopDetail.title}</div>
      <div>价格:{shopDetail.price}</div>

      <ActionBar>
        <ActionBar.Icon icon={<ChatO />} badge={{ dot: true }} text="客服" />
        <ActionBar.Icon
          icon={<CartO />}
          badge={{ content: Carcount }}
          text="购物车"
          onClick={() => navigate("/carttwo")}
        />
        <ActionBar.Icon icon={<ShopO />} badge={{ content: 12 }} text="店铺" />
        <ActionBar.Button type="warning" text="加入购物车" onClick={CartXq} />
        <ActionBar.Button type="danger" text="立即购买" />
      </ActionBar>
    </div>
  );
};

export default Index;
